<template>
  <div class="realTimeDeviceContentPage">
    <div
      v-if="props.listData.length > 0"
      class="card_item"
      v-for="(item, index) in props.listData"
      :key="item.devicetId"
    >
      <el-card>
        <template #header>
          <div class="card-header">
            <div>{{ item.deviceId }}</div>
            <div>
              <div
                class="status"
                :style="{ '--border-color': whatColor(item.onlineState) }"
              >
                <div
                  class="dot"
                  :style="{ '--dot-color': whatColor(item.onlineState) }"
                ></div>
                <div
                  class="value"
                  :style="{ '--value-color': whatColor(item.onlineState) }"
                >
                  {{ bigA.tags.onlineState[item.onlineState] }}
                </div>
              </div>
            </div>
          </div>
        </template>
        <div class="centerContent">
          <div class="machinePage">
            <img src="@/assets/boardImage/device.png" style="width: 90%" />
          </div>
          <div class="rightContent">
            <div
              v-for="(deviceItem, deviceIndex) in state.filed"
              :key="deviceIndex"
              class="text-item"
            >
              <div class="left">
                {{ deviceItem.name + " : " }}
              </div>
              <div class="text-value">
                <div>{{ item[deviceItem.key] }}{{ deviceItem.unit }}</div>
                <!-- <div>
                  {{ deviceItem.unit }}
                </div> -->
              </div>
            </div>
          </div>
        </div>
        <template #footer>
          <div class="card-footer">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="详情"
              placement="bottom"
            >
              <el-button class="btn" :icon="Search" @click="toggleInfo(item)">
                查看
              </el-button>
            </el-tooltip>
          </div>
        </template>
      </el-card>
    </div>
    <div v-else>暂无数据</div>
  </div>
</template>
<script lang="ts" setup>
import _ from "lodash";
import { onMounted, reactive, inject } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const cabinet = inject("cabinet") as any;
const bigA = inject("bigA") as any;
const realTime = inject("realTime") as any;
const itemObject = inject("itemObject") as any;

const state: {
  filed: any[]; //卧式字段
} = reactive({
  filed: [
    {
      name: "序列号",
      unit: "",
      value: "0.0",
      key: "serialNo",
    },
    {
      name: "料品编码",
      unit: "",
      value: "0.0",
      key: "goodsNo",
    },
    {
      name: "当前加工数量",
      unit: "G",
      value: "0.0",
      key: "currentProcessQuantity",
    },
    {
      name: "加工进度",
      unit: "%",
      value: "0.0",
      key: "processRate",
    },
    {
      name: "工单号",
      unit: "",
      value: "0.0",
      key: "workOrderNumber",
    },
  ],
});

const getrightObj = (filed: String, property: any, type: any) => {
  let value = _.filter(itemObject.fullData, { mqttFiled: filed });
  console.log("props.modelValue.type", type);
  if (type) {
    return value[0][property];
  } else {
    return value[0]["objectNameVertical"];
  }
};

const whatColor = (value: any) => {
  switch (value) {
    case 0:
      return "#b1b1b1";
    case 1:
      return "#90ffc9";
    case 2:
      return "#fff8ac";
    case 3:
      return "#ff5d87";
    case 4:
      return "#8cffff";
  }
};

interface Props {
  listData: any;
}
const props = withDefaults(defineProps<Props>(), {
  listData: [],
});

//跳转机柜大屏详情
const toggleInfo = (item: any) => {
  realTime.infoSingle = item;
  router.push({
    path: "/admin/DataMHistoryTime/detail",
    query: { regCode: item.regCode, deviceId: item.deviceId },
  });
};

onMounted(() => {});
</script>
<style lang="scss" scoped>
.realTimeDeviceContentPage {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;

  .card_item {
    width: 45%;
    margin-bottom: 2vh;
    .card-header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .status {
        width: 50px;
        padding: 3px;
        display: flex;
        justify-content: center;
        margin: 5px auto 0 auto;
        text-align: center;
        align-items: center;
        border-radius: 19px 19px 19px 19px;
        border: 1px solid var(--border-color);
        .dot {
          width: 8px;
          height: 8px;
          background: var(--dot-color);
          border-radius: 100px;
          color: var(--dot-color);
          bottom: 12rem;
          animation: notify-pulse 1s infinite;
          -webkit-animation: notify-pulse 1s infinite;
        }
        .value {
          margin-left: 3px;
          color: var(--value-color);
        }
      }
    }
    .centerContent {
      display: flex;
      flex-direction: row;
      align-items: center;
      .machinePage {
        width: 40%;
      }
      .rightContent {
        width: 60%;
        .text-item {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
          padding-top: 10px;
          .left {
            width: 50%;
          }
          .text-value {
            width: 50%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }
    .card-footer {
      position: relative;
      text-align: right;
    }
  }
}

//心跳效果
@keyframes notify-pulse {
  0% {
    transform: rotate(45deg) scale(0.8, 0.8);
    opacity: 1;
  }

  25% {
    transform: rotate(45deg) scale(1.2, 1.2);
    opacity: 0.5;
  }

  100% {
    transform: rotate(45deg) scale(0.8, 0.8);
    opacity: 1;
  }
}
</style>
